<template>
  <div>
    <div class="header-box">
      <span class="title-backicon" @click="goback()"><span class="icon-左箭头"></span></span>
      <div class="avatar-box">
        <img
          class="avatar-img"
          :src="profile.avatarUrl"
          v-if="profile.avatarUrl"
        />
        <div class="avatar-placeholder" v-else>暂无头像</div>
      </div>
      <div class="nickname-box">{{ profile.nickname }}</div>
      <div class="desc-box">个性签名: {{ profile.signature || '暂无' }}</div>
    </div>
    <div class="list-box">
      <div class="list-item" @click="toUserHome()"><span>个人主页</span><span class="icon iconfont icon-left-arrow"></span></div>
      <div class="list-item" @click="logout()"><span>退出登录</span><span class="icon iconfont icon-left-arrow"></span></div>
    </div>
  </div>
</template>

<script lang="ts">
import { APIType } from '@/api';
import {
  AccountInfo,
  LoginResponse,
  ProfileInfo,
} from '@/model/response-type.model';
import { Message } from 'element-ui';
import { namespace } from 'vuex-class';
import { Vue, Component } from 'vue-property-decorator';
import Router from 'vue-router';
const AppModule = namespace('app');
// TODO: 检测是否已登录，已登录则跳转到userHome，没登录则弹出登录弹框
@Component({})
export default class MineComponent extends Vue {
  account: Partial<AccountInfo> = {};
  profile: Partial<ProfileInfo> = {};

  @AppModule.Mutation('setLoginDialogVisible')
  setLoginDialogVisible: (value: boolean) => void;
  @AppModule.Mutation('setUserInfo')
  setUserInfo: (value: Partial<LoginResponse>) => void;

  $api: APIType;
  $router: Router;
  mounted() {
    this.getUserInfo();
  }
  getUserInfo() {
    this.$api.loginStatus().then((res) => {
      if (!res.account) {
        this.setUserInfo({});
        this.setLoginDialogVisible(true);
        return;
      }
      this.account = res?.account;
      this.profile = res?.profile;
    });
  }
  toUserHome() {
    if (this.account?.id) {
      this.$router.push(`/userHome/${this.account.id}`);
    } else {
      Message.warning('请先登录');
      this.setLoginDialogVisible(true);
    }
  }
  logout() {
    this.$api.logout().finally(() => {
      this.$router.push('/');
      this.setUserInfo({});
      window.sessionStorage.removeItem('cookie');
    });
  }
  goback() {
    this.$router.back();
  }
}
</script>

<style lang="scss" scoped>
.header-box {
  width: 100vw;
  height: auto;
  background: #df2d2d;
  color: #fff;
  text-align: center;
  padding: 0.1rem 0;
  padding-top: 0.8rem;
  .title-backicon {
    line-height: 0.8rem;
    text-align: center;
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.2rem;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
  }
  .avatar-box {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0 auto;
    .avatar-img {
      width: 100%;
      height: 100%;
    }
    .avatar-placeholder {
      font-size: 0.12rem;
      color: #f8f8f8;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .nickname-box {
    font-size: 0.2rem;
  }
  .desc-box {
    color: #e8e8e8;
    font-size: 0.14rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.list-box {
  .list-item {
    cursor: pointer;
    color: #333;
    padding: 0.1rem 0.5rem;
    font-size: 0.18rem;
    background: linear-gradient(180deg, #f2f2f2, #fff);
    border-bottom: 1px solid #f8f8f8;
    position: relative;
    .icon {
      color: #333;
      font-size: 0.2rem;
      transform: translateY(-50%) rotate(180deg);
      position: absolute;
      right: 0.5rem;
      top: 50%;
    }
  }
}
</style>
